<div class="modal-header">
    <span>{{ modalHeader }}</span>
    <button class="close" aria-label="Close" (click)="closeModal()">
        <span aria-hidden="true">&times;</span>
    </button>
</div>
<div class="modal-body">
    <form>
        <nb-card>
            <nb-card-header>
                试题信息
            </nb-card-header>
            <nb-card-body>
                <div class="row">
                    <div class="col-sm-6">
                        <div class="form-group">
                            <label for="courseId">课程</label>
                            <select class="form-control" [(ngModel)]="question.courseId" name="courseId" (change)="onCourseChange($event)">
                                <option *ngFor="let option of courseType" [value]="option.id">{{option.title}}</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <div class="form-group">
                            <label for="qbankId">题库</label>
                            <select class="form-control" [(ngModel)]="question.qbankId" name="qbankId">
                                <option *ngFor="let option of qbankType" [value]="option.id">{{option.title}}</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-6">
                        <div class="form-group">
                            <label for="qtype">类型</label>
                            <select class="form-control" [(ngModel)]="question.qtype" name="qtype" (change)="onQtypeChange($event)">
                                <option *ngFor="let option of questionType" [value]="option.name">{{option.val}}</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <div class="form-group">
                            <label for="knowledgePoint">知识点</label>
                            <input type="text" class="form-control" id="knowledgePoint" name="knowledgePoint" placeholder="知识点" [(ngModel)]="question.knowledgePoint">
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-6">
                        <div class="form-group">
                            <label for="score">分值</label>
                            <input type="text" class="form-control" id="score" name="score" placeholder="分值" [(ngModel)]="question.score">
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <div class="form-group">
                            <label for="difficulty">难度</label>
                            <input type="number" class="form-control" id="difficulty" name="difficulty" placeholder="难度" [(ngModel)]="question.difficulty">
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-6">
                        <div class="form-group">
                            <label for="remark">备注</label>
                            <input type="text" class="form-control" id="remark" name="remark" placeholder="备注" [(ngModel)]="question.remark">
                        </div>
                    </div>
                    <div class="col-sm-6" [hidden]="!isEdit">
                        <div class="form-group">
                            <label for="status">状态</label>
                            <select class="form-control" [(ngModel)]="question.status" name="status">
                                <option *ngFor="let option of statusType" [value]="option.name">{{option.val}}</option>
                            </select>
                        </div>
                    </div>
                </div>
            </nb-card-body>
        </nb-card>
        <nb-card>
            <nb-card-header>
                题干
            </nb-card-header>
            <nb-card-body>
                <ngx-froala #title elementId="title" content="{{question.title}}" (froala)="froalaContent($event)"></ngx-froala>
            </nb-card-body>
        </nb-card>
        <nb-card [hidden]="choiceHidden">
            <nb-card-header>
                选项A
            </nb-card-header>
            <nb-card-body>
                <ngx-froala #choiceA elementId="choiceA" content="{{question.choiceA}}" (froala)="froalaContent($event)"></ngx-froala>
            </nb-card-body>
        </nb-card>
        <nb-card [hidden]="choiceHidden">
            <nb-card-header>
                选项B
            </nb-card-header>
            <nb-card-body>
                <ngx-froala #choiceB elementId="choiceB" content="{{question.choiceB}}" (froala)="froalaContent($event)"></ngx-froala>
            </nb-card-body>
        </nb-card>
        <nb-card [hidden]="choiceHidden">
            <nb-card-header>
                选项C
            </nb-card-header>
            <nb-card-body>
                <ngx-froala #choiceC elementId="choiceC" content="{{question.choiceC}}" (froala)="froalaContent($event)"></ngx-froala>
            </nb-card-body>
        </nb-card>
        <nb-card [hidden]="choiceHidden">
            <nb-card-header>
                选项D
            </nb-card-header>
            <nb-card-body>
                <ngx-froala #choiceD elementId="choiceD" content="{{question.choiceD}}" (froala)="froalaContent($event)"></ngx-froala>
            </nb-card-body>
        </nb-card>
        <nb-card [hidden]="choiceHidden">
            <nb-card-header>
                选项E
            </nb-card-header>
            <nb-card-body>
                <ngx-froala #choiceE elementId="choiceE" content="{{question.choiceE}}" (froala)="froalaContent($event)"></ngx-froala>
            </nb-card-body>
        </nb-card>
        <nb-card [hidden]="choiceHidden">
            <nb-card-header>
                选项F
            </nb-card-header>
            <nb-card-body>
                <ngx-froala #choiceF elementId="choiceF" content="{{question.choiceF}}" (froala)="froalaContent($event)"></ngx-froala>
            </nb-card-body>
        </nb-card>
        <nb-card [hidden]="!choiceHidden">
            <nb-card-header>
                试题描述
            </nb-card-header>
            <nb-card-body>
                <ngx-froala #content elementId="content" content="{{question.content}}" (froala)="froalaContent($event)"></ngx-froala>
            </nb-card-body>
        </nb-card>
        <nb-card>
            <nb-card-header>
                正确答案
            </nb-card-header>
            <nb-card-body>
                <ngx-froala #answer elementId="answer" content="{{question.answer}}" (froala)="froalaContent($event)"></ngx-froala>
            </nb-card-body>
        </nb-card>
        <nb-card>
            <nb-card-header>
                试题解析
            </nb-card-header>
            <nb-card-body>
                <ngx-froala #analysis elementId="analysis" content="{{question.analysis}}" (froala)="froalaContent($event)"></ngx-froala>
            </nb-card-body>
        </nb-card>
        <nb-card [hidden]="!previewHidden">
            <nb-card-header>
                试题预览
            </nb-card-header>
            <nb-card-body>
                <ngx-previewq #previewq></ngx-previewq>
            </nb-card-body>
        </nb-card>
    </form>
</div>
<div class="modal-footer">
    <button class="btn btn-md" (click)="closeModal()">取消</button>
    <button class="btn btn-md btn-info" (click)="previewData()" [hidden]="previewHidden">预览</button>
    <button class="btn btn-md btn-primary" (click)="saveData()">保存</button>

</div>